import React from 'react';
import Facialmaskpage1 from './Facialmaskpage1.js'
import Facialmaskpage2 from './Facialmaskpage2.js'
import Facialmaskpage3 from './Facialmaskpage3.js'
import Facialmaskpage4 from './Facialmaskpage4.js'
import Facialmaskpage5 from './Facialmaskpage5.js'
import Facialmaskpage6 from './Facialmaskpage6.js'
import FacialmaskOrder from './FacialmaskOrder.js'
import WelcomeLayer from './WelcomeLayer.js'
import {Router,Route,browserHistory} from 'react-router';
import {ROOTAPI} from '../../publicAPI/publicAPI.js'
import {addTouch} from './ScrollAct.js'
require('../css/Facialmask.css');
class Facialmask extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
            item:[],
	        filmcloth:{
                dname:"",
                name:""
            },
            hyaluronicacid:{
                 dname:"",
                name:""
            },
            essence:{
                 dname:"",
                name:""
            },
            essentialoilsa:{
                 dname:"",
                name:""
            },
            essentialoilsb:{
                 dname:"",
                name:""
            },
            effect:{
                 dname:"",
                name:""
            },
            moiskin:{
                 dname:"",
                name:""
            },
            preservative:{
                 dname:"",
                name:""
            },
            num:{
                 dname:"",
                name:""
            },
            zhiwujinghua1:{
                dname:"",
                name:""
            },
            zhiwujinghua2:{
                dname:"",
                name:""
            },
            zhiwujinghua3:{
                dname:"",
                name:""
            },
            isreturn:false,//是否显示返回订单按钮
        }
	}
	componentWillMount(){
        this.getItem()
	}
    componentDidMount(){
        this.addScrollAction();
    }
    addScrollAction(){
        let fmpage1=document.getElementById("fmpage1")
        let fmpage2=document.getElementById("fmpage2")
        let fmpage3=document.getElementById("fmpage3")
        let fmpage4=document.getElementById("fmpage4")
        let fmpage5=document.getElementById("fmpage5")
        let fmpage6=document.getElementById("fmpage6")
        let fmpage7=document.getElementById("fmpage7")
        addTouch(fmpage1,1)
        addTouch(fmpage2,2)
        addTouch(fmpage3,3)
        addTouch(fmpage4,4)
        addTouch(fmpage5,5)
        addTouch(fmpage6,6)
        addTouch(fmpage7,7)
    }
    clickAction(page) {
        if(page<7) {
            document.getElementById("touchpad").style.transform="translateY(-"+page*100+"%"+")"
        }else{
           
        }          
    }
    reSelectionAct(page) {
        document.getElementById("touchpad").style.transform="translateY("+page*100+"%"+")"
        this.setState({
            isreturn:true
        })
    }
    setFilmcloth(filmcloth){
        this.setState({
            filmcloth:filmcloth
        })
    }
    sethyaluronicacid(hyaluronicacid){
       this.setState({
            hyaluronicacid:hyaluronicacid
        }) 
    }
    setessence(essence){
        this.setState({
            essence:essence
        }) 
    }
    setessentialoils(essentialoilsa,essentialoilsb){
        this.setState({
            essentialoilsa:essentialoilsa,
            essentialoilsb:essentialoilsb
        })
    }
    setnum(num){
        this.setState({
            num:num
        })
    }
    seteffect(effect){
        this.setState({
            effect:effect
        })
    }
    setmoiskin(moiskin){
        this.setState({
            moiskin: moiskin,
        })
    }
    setpreservative(preservative){
        this.setState({
            preservative:preservative
        })
    }
    setZhiwujinghua1(zhiwujinghua1){
        this.setState({
            zhiwujinghua1:zhiwujinghua1
        })
    }
    setZhiwujinghua2(zhiwujinghua2){
        this.setState({
            zhiwujinghua2:zhiwujinghua2
        })
    }
    setZhiwujinghua3(zhiwujinghua3){
        this.setState({
            zhiwujinghua3:zhiwujinghua3
        })
    }
    getItem(){
        var url=ROOTAPI+'kabuy/item/instance.api?id='+1
        fetch(url, {
                method : 'GET',
                credentials: 'include',
            }).then(res=>{
                if(res.ok){
                    res.json().then(data=>{
                        this.setState({
                            item:data.meta.ItemOption.selectors
                        })
                    })
                    
                }else{
                    alert("错误")
                }
        })
    }
    //返回订单滚动处理
    clickRetOrder(page){
        document.getElementById("touchpad").style.transform="translateY(-"+page*100+"%"+")"
    }
    render() {
        return (
            <div className="fm-scorll" id="touchpad">
                <WelcomeLayer/>
            	<Facialmaskpage1 clickBack={this.clickAction.bind(this)} 
                                 callback={this.setFilmcloth.bind(this)} 
                                 isreturn={this.state.isreturn} 
                                 clickRetOrder={this.clickRetOrder.bind(this)}/>
            	<Facialmaskpage2 clickBack={this.clickAction.bind(this)} 
                                 callback={this.sethyaluronicacid.bind(this)} 
                                 isreturn={this.state.isreturn} 
                                 clickRetOrder={this.clickRetOrder.bind(this)}/>
                <Facialmaskpage3 clickBack={this.clickAction.bind(this)} 
                                 callback={this.setessentialoils.bind(this)}  
                                 callback2={this.setessence.bind(this)} 
                                 isreturn={this.state.isreturn} 
                                 clickRetOrder={this.clickRetOrder.bind(this)}/>
                <Facialmaskpage4 clickBack={this.clickAction.bind(this)} 
                                 callback1={this.seteffect.bind(this)} 
                                 callback2={this.setmoiskin.bind(this)} 
                                 callback3={this.setpreservative.bind(this)} 
                                 isreturn={this.state.isreturn} 
                                 clickRetOrder={this.clickRetOrder.bind(this)}/>
                <Facialmaskpage5 clickBack={this.clickAction.bind(this)}
                                 isreturn={this.state.isreturn} 
                                 clickRetOrder={this.clickRetOrder.bind(this)}
                                 callback={this.setZhiwujinghua1.bind(this)}
                                 callback2={this.setZhiwujinghua2.bind(this)}
                                 callback3={this.setZhiwujinghua3.bind(this)}/>
                <Facialmaskpage6 clickBack={this.clickAction.bind(this)}
                                 callback={this.setnum.bind(this)} 
                                 isreturn={this.state.isreturn} 
                                 clickRetOrder={this.clickRetOrder.bind(this)}/>
                <FacialmaskOrder filmcloth={this.state.filmcloth}
                                 hyaluronicacid={this.state.hyaluronicacid}
                                 essence={this.state.essence}
                                 essentialoilsa={this.state.essentialoilsa}是
                                 essentialoilsb={this.state.essentialoilsb}
                                 effect={this.state.effect}
                                 moiskin={this.state.moiskin}
                                 preservative={this.state.preservative}
                                 num={this.state.num} 
                                 item={this.state.item}
                                 zhiwujinghua1={this.state.zhiwujinghua1}
                                 zhiwujinghua2={this.state.zhiwujinghua2}
                                 zhiwujinghua3={this.state.zhiwujinghua3}
                                 callback={this.reSelectionAct.bind(this)}/>
            </div>
        )
    }
}


export default Facialmask;